昨天已經初步介紹幾個簡單常用的bootstrap語法，
今天來看看幾個也是好用、比較詳細或特殊的情況。

col可以先空幾欄嗎

使用 offset-斷點-欄數，
可以讓此區塊的左邊空出想要的欄數，

<div class="container>
	<div class="row">
		<div class="col-3 offset-md-3">寬3欄，左邊空3欄</div>
		<div class="col-3 offset-md-3">寬3欄，左邊空3欄</div>
	</div>
</div>

上面會執行出一行裡，空3欄，出現一個寬3欄的div，然後再空3欄，出現一個寬3欄的div，而且因為有斷點 md ( ≥768px ) ，因此小於 768px 就不會空欄位。
這時就滿12欄了，這裡補充一下，如果有超出12欄，下個當行物件會換行。

row裡面位置的排列

在 row 的 class 裡加上排序的名稱

1. row的垂直排列
   讓物件在上下的空間中排序

   • align-items-start
     會排在最上面
   • align-items-center
     會排在垂直距離的中間
   • align-items-end
     排在最下面

2. 物件的排列

   • justify-content-start
     同行物件排在最左邊，中間沒有空隙。
   • justify-content-center
     同行物件一起排在正中間，中間沒有空隙。
   • justify-content-end
     同行物件排在最右邊，中間沒有空隙。
   • justify-content-between
     扣掉同行物件的寬度，剩下寬度均分在物件之中，
     所以假設只有兩個物件，一個會靠左一個靠右。

補充好用的padding、margin的class名稱

前幾天分享的css屬性：padding、margin在這邊也可能用上，
個人覺得搭配 row、col 這些區塊真的很方便！
先來介紹各個縮寫，再一起組合起來！

1. padding或是margin

• padding 以 p 表示
• margin 以 m 表示

2. 方向性

• 上面：t（top）
• 下面：b（bottom）
• 左邊：s （start）
• 右邊：e（end）
• 左右兩邊都要：x（橫向x軸）
• 上下兩邊都要：y（直向y軸）
• 上下左右都要的話，這邊不用設定，直接接數字

3. 距離(倍數)

距離前面要用 - 一橫來分開

• 0：就是0
• 1：0.25em
• 2：0.5em
• 3：1em ( 剛好一倍，所以最常用)
• 4：1.5em
• 5：3em
• auto：瀏覽器自動調整margin（所以padding不能用喔）

4. 舉例

• p-1
  就是padding：0.25em;
• mt-3
  就是margin-top：1em;
• m-auto
  瀏覽器自動設定margin

以上就是響應式網站快速簡單的寫法！
有興趣也可以到 Bootstrap 的官方文件瀏覽喔！
https://getbootstrap.com/docs/5.1/getting-started/introduction/